<template>
  <div>
    <nav-bar>
      <img @click="$router.back()" class="left" src="../../../assets/img/navbar/ic_title_close.png" slot="left" alt="">
      <span slot="center">意见反馈</span>
    </nav-bar>
    <div class="content_box content_fixed">
      <h3>反馈问题类型</h3>
      <ul class="type_box">
        <li v-for="(item, index) in typelist" :key="index">
          <van-button 
            class="change_btn" 
            :class="currentIndex === index ? 'btn_active': ''"
            @click="currentIndex = index">
            {{item}}</van-button>
        </li>
      </ul>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="500"
        placeholder="输入你的建议,您的支持使我们前进的动力!"
        show-word-limit
        class="problem_type"
      />
      <h3>填写联系方式</h3>
      <van-field
        v-model="mode"
        placeholder="输入您的联系方式：QQ号，手机号，微信号均可。"
        class="contact_mode"/>
      <van-button type="info" class="ic_submit" @click="submit">提  交</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
import { getFeedBack } from '../../../network/home'
  export default {
    components: {
      NavBar,
    },
    data() {
      return {
        typelist: ['App体验', '创意金点子', '投诉问题', '其他'],
        currentIndex: 0,//当前选中类型
        message: '',//建议
        mode: '',//联系方式
      }
    },
    methods: {
      submit() {
        getFeedBack(this.radio, this.message, this.mode).then(res => {
          console.log(res)
          if(res.state === 'ok') {
            console.log(res)
            this.$toast(res.msg)
            this.$router.back()
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
        })
      }
    },
    computed: {
      radio() {
        if(this.currentIndex === 0) {
          return 1
        }else if(this.currentIndex === 1) {
          return 3
        }else if(this.currentIndex === 2) {
          return 4
        }else if(this.currentIndex === 3) {
          return 5
        }
      }
    },
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 680px;
  padding: 0 35px;
}

.content_box h3 {
  font-size: 30px;
  font-weight: 500;
  padding: 40px 0;
  color: #333;
}

.type_box {
  display: flex;
  justify-content: space-between;
}

.change_btn {
  width: 155px;
  height: 60px;
  border-radius: 5px;
  font-size: 24px;
  color: #333;
}

.btn_active {
  color: #4152E5;
  border-color: #4152E5;
}

.problem_type {
  margin-top: 40px;
  width: 680px;
  height: 250px;
  font-size: 24px;
  line-height: 30px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
}

.contact_mode {
  width: 680px;
  height: 120px;
  font-size: 24px;
  line-height: 30px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
}

.ic_submit {
  width: 680px;
  height: 88px;
  font-size: 30px;
  font-weight: bold;
  border-radius: 10px;
  margin: 60px 0;
  background: #4152E5;
}
</style>